<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <!-- 什么是组件？
    index.html这个文件就是组件，也是根组件。 -->
    <div id="app">
        <child></child>
        <!-- navBar驼峰式命名其组件的写法:nav-bar -->
        <nav-bar></nav-bar>
    </div>



    <script>
        Vue.component("child", {
            template: `
            <div>template中css样式只能写成行内标签</div>
            `
        })
        Vue.component("navBar", {
            // 用template定义组件模板
            template: `
           
            <div style="background-color: aquamarine;">
                template中css样式只能写成行内标签，只能写一个div标签
            <span @click="main()">{{getMain}}</span>|
            <span>home</span>|
            <span>about</span>
            </div>

            `,
            methods: {
                main() {
                    console.log("回到首页");
                }
            },
            computed: {
                getMain() {
                    return "首页"
                }
            }

        })

        new Vue({
            el: "#app",
            data: {}
        })
    </script>


</body>

</html>